<template>
  <div class="container">
    <el-row>
      <el-form :model="formInline" @keyup.enter.native="search">
        <el-col :span="8" align="left">
         <el-form-item :label="$t('m.send.expresscode')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.subordercode"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.send.sendingcode')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.sendingcode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.in.ordernumber')" :label-width="formLabelWidth">
            <el-input maxlength="30" show-word-limit v-model="formInline.ordercode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.out.storeordercode')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.storeordercode" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-form-item>
            <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="ellipse"></div>
    <el-table
      ref="table"
      stripe
      empty-text
      fits
      v-loading="tableLoading"
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange">
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <!-- <el-table-column align="center" prop="expresscode" :label="$t('m.send.expresscode')">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-expressCode')">
            <el-button type="text" @click.stop="openResult(scope.row)">{{scope.row.expresscode}}</el-button>
          </template>
          <template v-else>{{scope.row.expresscode}}</template>
        </template>
      </el-table-column> -->
      <el-table-column align="center" prop="subordercode" :label="$t('m.send.expresscode')"></el-table-column>
      <el-table-column align="center" prop="sendingcode" :label="$t('m.send.sendingcode')"></el-table-column>
      <el-table-column :label="$t('m.state')" align="center" prop="state">
        <template slot-scope="scope">
          <!-- 没有国际化 -->
          <span v-if="scope.row.state==1">待处理</span>
          <span v-if="scope.row.state==2">交寄完成</span>
          <span v-if="scope.row.state==20">已取消</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="ordercode" :label="$t('m.in.ordernumber')"></el-table-column>
      <el-table-column align="center" prop="consignee" :label="$t('m.out.consignee')"></el-table-column>
      <el-table-column align="center" prop="contact" :label="$t('m.out.contact')"></el-table-column>
      <el-table-column align="center" prop="provincename" :label="$t('m.out.provincename')"></el-table-column>
      <el-table-column align="center" prop="cityname" :label="$t('m.out.cityname')"></el-table-column>
      <el-table-column align="center" prop="regionname" :label="$t('m.out.regionname')"></el-table-column>
      <el-table-column align="center" prop="shippingaddress" :label="$t('m.out.address')"></el-table-column>
      <el-table-column align="center" prop="sendingdate" :label="$t('m.send.sendingdate')"></el-table-column>
    </el-table>

    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper"
      :page-sizes="pageSizeList"
      :page-size="rowSize"
      :current-page="page"
      :total="totalRows"
      @current-change="currentChangeInitFn"
      @size-change="handleSizeChangeInitFn">
    </el-pagination>

    <!-- 交寄结果 dialog 开始 -->
    <el-dialog width="1200px" :title="$t('m.send.send')" :visible.sync="dialogFormVisible" @close="close">
      <div v-loading="popLoading">
        <el-form>
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('m.send.expresscode')" :label-width="formLabelWidth" prop="expresscode">
                <el-input maxlength="20" show-word-limit v-model="expresscode" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-table
          ref="resultTable"
          stripe
          :data="sendingData.sendingDetailOutputList"
          empty-text
          fits>
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" label="SKU" prop="productspeccode"></el-table-column>
          <el-table-column align="center" label="SupplierCode" prop="suppliercode"></el-table-column>
          <el-table-column align="center" :label="$t('m.in.productname')" prop="productname"></el-table-column>
          <el-table-column align="center" :label="$t('m.in.productspec')" prop="productspec"></el-table-column>
          <el-table-column align="center" :label="$t('m.review.cartons')" prop="cartons"></el-table-column>
        </el-table>
        <el-row>
          <el-col :span="3" v-for="(item,index) in sendingData.packageOutputs" :key="index">
            <span>{{item.packagename}} :</span>
            <span>{{item.packagenumber}}</span>
          </el-col>
        </el-row>
        <div class="btns">
          <el-button size="mini" @click="close">{{$t('m.close')}}</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 交寄结果 dialog 结束 -->
  </div>
</template>

<script>
import common from '@/utils/common'
export default {
  name:'ReviewPackaging',
  data(){
    return {
      popLoading:false,
      formInline:{
        ordercode:'',
        expresscode:'',
        shippingaddress:'',
        shopid:'',
        stateid:null,
        storeordercode:'',
        warehouseid:null,
        subordercode:'',
        sendingcode:''
      },
      tableData:[],
      dialogFormVisible:false,
      dialogFormVisible1:false,
      formLabelWidth:'140px',
      multipleSelection:[], //单选
      sendingData:{},
      sendingForm:{},
      sendingFormData:[],
      expresscode:''
    }
  },
  methods:{
    init(){
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/sending/history',
        params:{
          page:this.page,
          rows:this.rowSize,
          ordercode:this.formInline.ordercode,
          subordercode:this.formInline.subordercode,
          productspeccode:this.formInline.productspeccode,
          storeordercode:this.formInline.storeordercode,
          sendingcode:this.formInline.sendingcode
        }
      }).then(({data})=> {
        data.records.forEach(element => {
          element.sendingdate=common.timestampToTime(element.sendingdate)
        })
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
      })
    },
    search(){
      this.page = 1
      this.init()
    },

    close(){
      this.dialogFormVisible = false
      this.sendingData = {}
      this.init()
    },
    openResult(row){
      this.expresscode = row.expresscode
      this.dialogFormVisible = true
      this.sendingResult(row.expresscode)
    },
    sendingResult(expresscode){
      this.$axios({
        method:'get',
        url:`/sending/expresscode?expresscode=${expresscode}&state=2`
      }).then(({data})=> {
        this.sendingData = data
      })
    }
  },
  activated(){
    this.init()
  },
  beforeRouteLeave(to, form, next){
    this.dialogFormVisible=false
    this.dialogFormVisible1=false
    next()
  }
}
</script>